<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="orderList">
		<!--nvue端，超出一屏滚动时scroll和alignLeft必须同为true-->
		<fui-tabs :tabs="tabs" scroll alignLeft @change='orderChangeTab' ontWeight='600' selectedFontWeight='600'
		 sliderBackground='#35743D' selectedColor='#35743D' size='30' scale='1' :short='false'></fui-tabs>
		<view class="orderCont marin25"  v-for="(item,index) in ordeLists" :key='index' @click="goDetails(item)">
			<view class="cont-hname">
				<text>
					<!-- 云辰大酒店 -->
					{{item.mname}}
				</text>
				<!-- <text class="state-name font28">{{item.zt=='4'?'待付款':item.zt=='1'?'1':''}}</text> -->
				<text class="state-name font28" v-if="item.type=='4' && item.zt == '3' ">申请退款中</text>
				<text class="state-name font28" v-if="item.type=='3' && item.zt == '3' ">待使用</text>
				<text class="state-name font28" v-if="item.type=='2' && item.zt == '3' ">申请退款中</text>
				<text class="state-name font28" v-if="item.type=='1' && item.zt == '3' ">申请退款中</text>
				<text class="state-name font28" v-if="item.zt != '3'">{{orderState[item.zt]}}</text>
				<!-- <text class="state-name font28">预定成功</text> orderState-->
			</view>
			<view class="cont-hbottom">
				<view class="img-lt">
					<image :src="baseOssUrl2 + item.headPhoto" mode="aspectFill"></image>
				</view>
				<view class="hbottom-rt font28">
					<view class="" v-if="item.type == 1 || item.type == 2">
						<view class="" >
							{{item.roomList.length}}间，
							<!-- 时尚大床房 -->
							{{item.roomList[0].name}}
						
						</view>
						<view class="">
							{{item.sjrzTime.substring(0, 10)}} ~
							{{item.lkTime}}
						
						</view>
					</view>
					<view class="" v-if="item.type == 3 || item.type == 4">
						<view class="" >
							{{item.spName}}
						</view>
						<view class="">
							下单时间:{{item.cjTime}}
						
						</view>
					</view>
					<!-- <view class="">
						数量：1
					</view> -->
					<view class="hb-priceA">
						总价：¥{{item.money}}
					</view>
					<view class="pay-price">
						实付款：¥{{item.money}}
					</view>
				<!-- 砍掉	<view class="again-book" v-if="item.zt == 6 || item.zt == 2">
						<fui-button text="再次预订" :margin="['24rpx', '0rpx','0']" radius='46rpx' size="26" width='160rpx' color="#fff" background="#35743D"
						 borderColor='#FFF' height='60rpx'></fui-button>
					</view> -->
					<view class="again-book" v-if="item.zt == 0">
						<fui-button text="付款" :margin="['24rpx', '0rpx','0']" radius='46rpx' size="26" width='160rpx' color="#fff" background="#35743D"  @click="goDetails(item)"
						 borderColor='#FFF' height='60rpx'></fui-button>
					</view>
					<view class="again-book"  v-if="item.zt == 4">
						<fui-button text="评价" :margin="['24rpx', '0rpx','0']" radius='46rpx' size="26" width='160rpx' color="#7E7E7D" background="#35743D"
						 borderColor='#7E7E7D' height='60rpx' @click="jump(item)"  plain></fui-button>
					</view>
					<!-- 美食 -->
					<!-- <view class="again-book">
						<fui-button text="查看劵码" :margin="['24rpx', '0rpx','0']" radius='46rpx' size="26" width='160rpx' color="#fff" background="#35743D"
						 borderColor='#FFF' height='60rpx'></fui-button>
					</view>
					<view class="again-book">
						<fui-button text="退款进度" :margin="['24rpx', '0rpx','0']" radius='46rpx' size="26" width='160rpx' color="#7E7E7D"
						 background="#35743D" borderColor='#7E7E7D' height='60rpx' plain></fui-button>
					</view> -->
				</view>
			</view>
		</view>
		<fui-divider v-if="bottomShowText" text="没有更多了"></fui-divider>
		<f-tabs :current-page='1'></f-tabs>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	export default {
		//登录状态
		// computed: mapState(['userId']),
		computed: { 
			...mapState(['userId']), 
		},

		data() {
			return {
				orderState:{
					0:'待付款',
					1:'预订中',
					2:'已取消',
					3:'申请退款中',
					4:"待评价",
					5:"评价完成",
					6:'预订成功',
					7:'已完成',
					9:"待收货",
					11: "已同意退款"
				},
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				orderTabFn: '',
				tabs: [{
					//标签显示文本（String）
					id: '',
					name: '全部'
				}, {
					id: '1',
					name: '待支付'
				}, {
					id: '2',
					name: '待使用',
				}, {
					id: '9',
					name: '待收货'
				}, {
					id: '4',
					name: '待评价'
				}, {
					id: '5',
					name: '退款/售后'
				}, ],
				stateZt: '',
				page: 1,
				limit: 10,
				ordeLists: [],
				dataPages: '',
				bottomShowText:false
			}
		},
		onLoad() {
			// if (!this.isLogin) {
			// 	uni.navigateTo({
			// 		url: '../login/index'
			// 	})
			// }
		},
		onReachBottom() {
			console.log("触底11", this.ordeLists.length, this.dataPages)
			if (this.page >= this.dataPages) {
				this.fui.toast("到底了")
				this.bottomShowText = true
				return false
			} else {
				this.page++
				this.orderInfoList()
			}
		},
		onPullDownRefresh() {
			console.log('开始');
			this.page = 1
			this.ordeLists = []
			this.orderInfoList()
			setTimeout(function() {
				console.info('请求结束')
				uni.stopPullDownRefresh();
			}, 1000);

		},
		onShow() {
			this.orderInfoList()
			console.log("userId", this.userId)
		},
		methods: {
			...mapMutations(['login', 'logout']),
			orderChangeTab(e) {
				console.log("vhange", e)
				this.orderTabFn = e.index


				switch (e.index) {
					case 0: //状态一
						this.stateZt = ''
						break
					case 1: //状态二
						this.stateZt = '0'
						break
					case 2: //状态三
						this.stateZt = '1'
						break
					case 3: //状态三
						this.stateZt = '9'
						break
					case 4: //状态三
						this.stateZt = '4'
						break
					case 5: //状态三
						this.stateZt = '3,7,8,11'
						break
				}
				console.log("switch", this.stateZt)
				this.orderInfoList()
			},
			// orderList
			orderInfoList() {
				// console.log("idd", this.orderId)
				this.$http.get(this.$httpApi.orderList, {
					data: {
						userId: this.userId,
						zts: this.stateZt,
						page: this.page,
						limit: this.limit,

					}
				}).then(res => {
					if (res.code == 0) {
						// this.ordeLists = res.page
						// res.page.forEach(val=>{
						// let arr = val.ydTime.split(',')
						// let starTime = arr[0]
						// let endTime = arr[ arr.length-1 ]
						// console.log("arr",arr)
						// this.$set(val,'starTime', starTime)
						// this.$set(val,'endTime', endTime)
						// })
						console.log("arrpage", res.page)
						if (res.pages == 1) {
							this.ordeLists = []
							this.ordeLists = res.page
							console.log("ordeLists1", this.ordeLists)
						} else if (res.pages == 0) {
							this.ordeLists = []
						} else {
							this.ordeLists = this.ordeLists.concat(res.page)
							console.log("ordeLists2", this.ordeLists, res.page)
						}


						this.dataPages = res.total
						this.$forceUpdate()
						console.log("lists", this.ordeLists)
					}
				})
			},
			jump (e) {
				uni.navigateTo({
					url: `/pages/comment/index?id=${e.mid}&oid=${e.id}`
				})
			},
			// 预订中等的状态
			goDetails(e){
				console.log(e.type);
				if(e.type == 1) {
					uni.navigateTo({
						url: "/pages/hotelOrderDetails/index?orderId="+e.id
					})
				}
				if(e.type == 2) {
					uni.navigateTo({
						url: "/pages/hotelOrderDetails/index?orderId="+e.id
					})
				}
				if(e.type == 4) {
					uni.navigateTo({
						url: "/pages/foodOrderDetails/index?id="+e.id
					})
				}
				if(e.type == 3) {
					uni.navigateTo({
						url: `/pages/writing/orderDtail/index?id=${e.id}&oid=${e.id}`
					})
					
				}
				if(e.type == 5) {
					uni.navigateTo({
						url: `/pages/ship/order/index?id=${e.id}&oid=${e.id}`
					})
				}
				if(e.type == 6) {
					uni.navigateTo({
						url: `/pages/scenic/orderDtail/index?id=${e.id}&oid=${e.id}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderList {
		height: 100%;
		padding-bottom: 150rpx;
		.orderCont {
			background: #FFFFFF;
			padding: 24rpx 24rpx 0;
			border-radius: 16rpx;
			margin-top: 24rpx; 
			.cont-hname {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				border-bottom: 1px solid #D9D9D9;
				padding-bottom: 24rpx;
				color: #1D1D1D;

				.state-name {
					color: #575757;
				}
			}

			.cont-hbottom {
				padding: 24rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.img-lt {
					width: 25%;

					image {
						width: 100%;
						height: 190rpx;
					}
				}

				.hbottom-rt {
					width: 75%;
					margin-left: 12rpx;
					color: #7E7E7D;
					line-height: 50rpx;

					.hb-priceA {}

					.pay-price {
						text-align: right;
						font-weight: bold;
						color: #1D1D1D;
					}

					.again-book {
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}

		// ------------------------
		// 底部菜单
		/deep/.fui-tabbar__icon {
			width: 38rpx !important;
			height: 38rpx !important;
		}

		/deep/.fui-tabbar__icon-wrap {
			width: 38rpx !important;
			height: 38rpx !important;
		}

		/deep/.fui-tabbar__wrap {
			background: #FFFFFF;
			box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.11);
		}

		/deep/.fui-tabbar__wrap {
			width: 90%;
			margin: 0 5%;
			border-radius: 60rpx;
			bottom: 50rpx;
		}

		/deep/.fui-tabbar__safe-area {
			display: none !important;
		}

		.fui-search__bar-label .data-v-1cc8ebce .fui-sb__label-center {
			background: none;
		}

		// 底部菜单
		/deep/.fui-tabbar__text {
			// font-size: 20rpx !important;
			margin-top: 3rpx;
		}
	}
</style>
